<template>
	<!-- 信息详情 -->
	<Top-Page class="details-msg-box" @click.stop="comment_show = false">
		<NavBar title="详情" left-arrow @click-left="navBack()" />

		<!-- 用户信息 -->
		<view class="works-users">
			<!-- 用户头像 -->
			<image
				:class="appSetting.circleAvatar ? 'round-s' : 'radius-s'"
				class="works-users-avatar"
				:src="info.avatar"
				mode="aspectFill"
				@click.stop="toDetail(info.user_id)"
			/>

			<!-- 用户名字和时间 -->
			<view class="works-users-name_time">
				<view class="works-users-name" @click.stop="toDetail(info.user_id)">
					{{ info.realname }}
				</view>

				<view class="works-users-time"> {{ info.date }} </view>
			</view>
			<!-- 更多 -->
			<view class="works-users-more" @click.stop="changeUnit()">
				<!-- <view class="more-icon"></view> -->
				<image class="h-40" src="/static/image/common/more.png" mode="heightFix"></image>
			</view>
		</view>

		<!-- 作品的文字信息 -->
		<view class="works-content"> {{ info.content }} </view>

		<!-- 作品的图片信息 -->
		<view class="works-imgs" v-if="info.img && info.img.length">
			<!--  <image
       
      /> -->
			<template v-for="(it, ind) in info.img">
				<image
					v-if="isImageOrVideo(it) === 'image'"
					class="works-imgs-item"
					:src="it"
					mode="aspectFill"
					@click.stop="previewImage(info.img, ind)"
				/>

				<view class="works-imgs-item" v-else-if="isImageOrVideo(it) === 'video'" @click="playVideo(it, ind)">
					<video
						class="works-imgs-item__content"
						:id="`video-${ind}`"
						:controls="!!info.controls"
						:show-center-play-btn="!!info.controls"
						:src="it"
						:poster="`${it}?vframe/jpg/offset/1`"
						@play="playVideo(it, ind)"
						@fullscreenchange="fullscreenchange"
					/>
					<view class="play-button" v-show="!info.controls"></view>
				</view>
			</template>
		</view>

		<!-- 地址 / 是否点赞 -->
		<view class="works-content-toolbar-container">
			<!-- 地址 -->
			<view class="works-content-toolbar-address">
				<image
					v-if="info.location?.city"
					class="works-content-toolbar-address-icon"
					src="../../../static/image/friend/location-2.png"
					mode="aspectFill"
				/>
				{{ info.location?.city ?? "" }}
			</view>

			<!-- 点赞 / 评论 / 分享 -->
			<view class="works-content-toolbar-tool">
				<!-- :class="['works-content-toolbar-tool-item', info.star_mine == 1 ? 'works-content-toolbar-star-1' : 'works-content-toolbar-star-2']"
					 -->
				<image
					@click.stop="changeStar(info.trends_id, -999)"
					class="works-content-toolbar-tool-item works-content-toolbar-star-1"
					:src="`${
						info.star_mine == 1 ? '../../../static/image/friend/star-2.png' : '../../../static/image/friend/star.png'
					}`"
					mode="aspectFill"
				/>

				<image
					class="works-content-toolbar-tool-item"
					src="../../../static/image/friend/comment.png"
					mode="aspectFill"
					@click.stop="openComment(-1, info.trends_id, '', '')"
				/>

				<!-- <image
          v-if="userID != info.user_id"
          class="works-content-toolbar-tool-item"
          @click.stop="share()"
          src="../../../static/image/friend/share.png"
          mode="aspectFill"
        /> -->
			</view>
		</view>

		<!-- 已点赞列表 -->
		<view class="works-star-list" v-if="info.star && info.star.length">
			<image class="works-star-list-icon" src="../../../static/image/friend/star-2.png" mode="aspectFill" />

			<view class="works-star-item" v-for="it in info.star">
				{{ it.realname }}
			</view>
		</view>

		<!-- 评论 -->
		<view class="works-comments" v-if="info.comments && info.comments.length">
			<view
				class="works-comments-item border-bottom-after"
				v-for="(it, index) in info.comments"
				@click.stop="openComment(index, info.trends_id, it.comments_id, it.realname)"
			>
				<image
					class="works-comments_avatar"
					:class="appSetting.circleAvatar ? 'round-s' : 'radius-s'"
					:src="it.avatar"
				/>

				<view class="works-comments_right">
					<view class="works-comments_right-top">
						<view class="works-comments_name"> {{ it.realname }} </view>

						<!-- <image
              @click.stop="changeStar(it.comments_id, index)"
              class="works-comments_star"
              :src="`${
                it.star_mine == 1 ? '../../../static/image/friend/star-2.png' : '../../../static/image/friend/star.png'
              }`"
            /> -->
					</view>

					<view class="works-comments_content">
						<view class="works-comments_content-reply-wrap" v-if="it.reply">
							回复
							<view class="works-comments_content-reply-text">{{ it.reply }}</view>
							：
						</view>
						{{ it.content }}
					</view>

					<!-- v-if="it.date" -->
					<view class="works-comments_date">{{ it.date }}</view>
				</view>
			</view>
		</view>
	</Top-Page>

	<!-- 评论框 -->
	<template v-if="comment_show">
		<Popup v-model:show="comment_show" position="bottom" round overlay-class="popup-overlay-2" class="comment-popup">
			<textarea
				v-model="comment_value"
				placeholder="说点什么吧..."
				maxlength="120"
				auto-focus
				auto-height
				class="comment-textarea"
			/>
			<view class="send-comment" @click.stop="sendComment()">发送</view>
		</Popup>
	</template>

	<Popup v-model:show="unit_show" position="bottom" round class="more-popup-2">
		<view class="popup-more-item border-bottom-after" @click.stop="toChat()">
			<image class="more-popup--icon" src="../../../static/image/message/chat.png" mode="" />
			发起聊天
		</view>
		<view class="popup-more-item border-bottom-after" @click.stop="postCircleHide()">
			<image class="more-popup--icon" src="../../../static/image/message/conceal.png" mode="" />
			隐藏此条动态
		</view>
		<view class="popup-more-item" @click.stop="postCircleWatchcircle()">
			<image class="more-popup--icon" src="../../../static/image/message/reject.png" mode="" />
			不看TA的动态
		</view>
	</Popup>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar.vue"
import Popup from "@/components/Popup/Popup.vue"
import { debounce, navBack } from "@/utils/utils.js"
import { useloginStore } from "@/store/login"
import pinia from "@/store/index"
const userStore = useloginStore(pinia)
export default {
	data() {
		return {
			appSetting: userStore.appSetting,
			navBack: navBack,
			user: userStore.userInfo,
			trends_id: 0,
			info: {},
			comment_show: false,
			unit_show: false,
			comment_value: "",
			userID: 0,
			tag: {
				index: 0,
				trends_id: 0,
				comments_id: 0,
				user_id: 0,
				reply: "",
			},
			videoContext: null,
		}
	},
	components: { NavBar, Popup },
	onLoad(options) {
		this.trends_id = options.trends_id ?? 0
		this.firstApi()
		this.userID = uni.getStorageSync("userInfo").user_id ?? 0
	},
	mounted() {},
	methods: {
		isImageOrVideo(url) {
			const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"]
			const videoExtensions = ["mp4", "avi", "mov", "mkv", "webm", "flv", "wmv"]

			// 提取文件扩展名
			const extension = url.split(".").pop().toLowerCase()

			if (imageExtensions.includes(extension)) {
				return "image"
			} else if (videoExtensions.includes(extension)) {
				return "video"
			} else {
				return "unknown"
			}
		},
		//前往<用户信息>
		toDetail(user_id) {
			uni.navigateTo({
				url: `/pages/contacts/detail?id=${user_id}`,
			})
		},
		//跳转聊天
		toChat() {
			uni.navigateTo({
				url: `/pages/message/chat?id=${this.info.user_id}`,
			})
		},
		//不看动态-单条
		postCircleHide() {
			this.$api.friendCircleApi
				.circleHide({
					trends_id: this.info.trends_id,
				})
				.then((res) => {
					uni.showToast({
						title: `${res.msg}`,
						icon: "none",
					})

					if (res.code == 0) {
						this.unit_show = false
						this.navBack()
					}
				})
		},
		//不看朋友圈-好友
		postCircleWatchcircle() {
			this.$api.friendCircleApi
				.circleWatchcircle({
					user_id: this.info.user_id,
					type: "trends_hide_his",
					num: 1,
				})
				.then((res) => {
					uni.showToast({
						title: `${res.msg}`,
						icon: "none",
					})

					if (res.code == 0) {
						this.unit_show = false
						this.navBack()
					}
				})
		},
		//每条信息右上角的更多
		changeUnit() {
			this.unit_show = true
		},
		//分享
		share() {
			// uni.navigateTo({
			//   url: `/pages/message/chat?id=${info.user_id}&avatar=${info.avatar}&realname=${info.realname}&content=${
			//     info.content || '有新的动态发布'
			//   }`
			// });
		},
		//打开评论框
		openComment(index, trends_id, comments_id, realname) {
			this.comment_show = true
			this.tag.index = ++index
			this.tag.trends_id = trends_id
			this.tag.comments_id = comments_id
			this.tag.reply = realname
		},
		//发送评论
		sendComment() {
			this.$api.friendCircleApi
				.circleComments({
					trends_id: String(this.tag.trends_id),
					comments_id: String(this.tag.comments_id),
					content: this.comment_value,
				})
				.then((res) => {
					if (res.code == 0) {
						const comments = {
							content: this.comment_value,
							realname: this.user.realname,
							avatar: this.user.avatar,
							comments_id: res.data.comments_id,
							reply: this.tag.reply,
						}

						this.info.comments.push(comments)
						// this.info.comments.splice(this.tag.index, 0, comments);

						this.comment_value = ""
					}
				})
		},
		//播放视频
		playVideo(src, ind) {
			this.videoContext = uni.createVideoContext(`video-${ind}`, this)
			this.videoContext.requestFullScreen() // 进入全屏
			this.videoContext.play() // 播放视频
		},
		fullscreenchange(e) {
			const fullScreen = e.detail.fullScreen
			console.log("全屏", fullScreen)

			!fullScreen && this.videoContext.pause()

			this.info.controls = fullScreen
			// this.info['show-center-play-btn'] = !fullScreen;
		},
		//图片预览
		previewImage(srcs, ind) {
			uni.previewImage({
				urls: srcs,
				current: ind,
				loop: true,
			})
		},
		//点赞
		changeStars(trends_id, index) {
			this.$api.friendCircleApi
				.circleStar({
					trends_id: trends_id,
				})
				.then((res) => {
					if (res.code == 0) {
						if (index === -999) {
							const star_mine = this.info.star_mine ?? 0
							this.info.star_mine = star_mine == 1 ? 0 : 1
						} else {
							const star_mine = this.info.comments[index]?.star_mine ?? 0
							this.info.comments[index].star_mine = star_mine == 1 ? 0 : 1
						}
					}
				})
		},
		//点赞 -- 防抖
		changeStar(trends_id, index) {
			if (index === -999) {
				const star_mine = this.info.star_mine ?? 0
				this.info.star_mine = star_mine == 1 ? 0 : 1
			} else {
				const star_mine = this.info.comments[index]?.star_mine ?? 0
				this.info.comments[index].star_mine = star_mine == 1 ? 0 : 1
			}

			this.starApi(trends_id, index)
		},
		starApi: debounce(function (trends_id, index) {
			this.$api.friendCircleApi
				.circleStar({
					trends_id: trends_id,
				})
				.then((res) => {
					if (res.code == 0) {
						if (res.data.star == 1) {
							this.info.star.push({
								user_id: this.user.user_id,
								realname: this.user.realname,
							})
						} else {
							const index = this.info.star.findIndex((item) => item.user_id == this.user.user_id)

							this.info.star.splice(index, 1)
						}
					} else {
						if (index === -999) {
							const star_mine = this.info.star_mine ?? 0
							this.info.star_mine = star_mine == 1 ? 1 : 0
						} else {
							const star_mine = this.info.comments[index]?.star_mine ?? 0
							this.info.comments[index].star_mine = star_mine == 1 ? 1 : 0
						}
					}
				})
		}),
		firstApi() {
			this.$api.friendCircleApi
				.circleInfo({
					trends_id: this.trends_id,
				})
				.then((res) => {
					if (res.code == 0) this.info = res.data
				})
		},
	},
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
